
<script setup>
	import {ref} from 'vue'
	const warnIndex = ref(0)
	const dateValue = ref('选择日期')
	const timeValue = ref('选择时间')
	const seleIndex = ref(0)
const pickerArray = [
	'日常提醒',
	'紧急提醒'
]
const warnArray = [
	'重复',
	'二次',
	'一次'
	
]
const seleChange = (e)=>{
	
	warnIndex.value =e.detail.value
}
const changeDate = (e)=>{
	dateValue.value =e.detail.value
	let splitArrar =dateValue.value.split("")
	splitArrar[4]= '年'
	splitArrar[7]= '月'
	splitArrar[10]= '日'
    dateValue.value = splitArrar.join("")
}
const changeTime = (e)=>{
	timeValue.value= e.detail.value
}
const seleWarn = (e)=>{
	seleIndex.value = e.detail.value
}
</script>

<template>
	<view class="content">
		<view class="con-div">
			
				<textarea placeholder="请输入内容" class="input-text"/>
		<picker @change="seleChange" mode="selector" :range="pickerArray" :value="warnIndex">
			<view class="selector">
				<text style="font-size: 32rpx;font-weight: 700;">类型</text>
				<view style="font-size: 28rpx;" class="life-warn">
					<text style="margin-right: 10rpx;">{{pickerArray[warnIndex]}}</text>
					<uni-icons size="28rpx" type="right"></uni-icons>
				</view>
			</view>
		</picker>
		
		<picker @change="changeDate" mode="date">
			<view class="selector">
				<text style="font-size: 32rpx;font-weight: 700;">日期</text>
				<view style="font-size: 28rpx;" class="life-warn">
					<text style="margin-right: 10rpx;">{{dateValue}}</text>
					<uni-icons size="28rpx" type="right"></uni-icons>
				</view>
			</view>
		</picker>
		
		<picker @change="changeTime" mode="time">
			<view class="selector">
				<text style="font-size: 32rpx;font-weight: 700;">时间</text>
				<view style="font-size: 28rpx;" class="life-warn">
					<text style="margin-right: 10rpx;">{{timeValue}}</text>
					<uni-icons size="28rpx" type="right"></uni-icons>
				</view>
			</view>
		</picker>
		<picker @change="seleWarn" mode="selector" :range="warnArray" :value="seleIndex">
			<view class="selector">
				<text style="font-size: 32rpx;font-weight: 700;">提醒</text>
				<view style="font-size: 28rpx;" class="life-warn">
					<text style="margin-right: 10rpx;">{{warnArray[seleIndex]}}</text>
					<uni-icons size="28rpx" type="right"></uni-icons>
				</view>
			</view>
		</picker>
			<button class="btn-add">保存</button>
		</view>
	</view>
</template>


<style lang="scss" scoped>
.con-div{
	width: 690rpx;
	margin: 0 auto;
	.selector{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 648rpx;
		height: 94rpx;
		border: 1px solid black;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 0 20rpx;
		background-color: #fff;
	}
	.input-text{
		
		width: 650rpx;
		height: 350rpx;
		border: 1px solid black;
	border-radius: 15rpx;
	background-color: #fff;
	padding: 20rpx;
	font-size: 28rpx;
	}
	.btn-add{
		width: 632rpx;
		height: 96rpx;
		background-color: #ffeb3b;
		border: 2px solid black;
		border-radius: 60rpx;
		margin-top: 80rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 700;
	}
}

</style>
